window.addEventListener('load', function () {
    var class_all = this.document.querySelector('.class-all');
    var satrtX = 0;
    var moveX = 0;
    var num = 0;
    var class_box = this.document.querySelectorAll('.class-box');
    // var classification_one = this.document.querySelectorAll('.classification-one');
    var offset = class_box[0].offsetWidth;

    var lis = this.document.querySelector('.dot').querySelectorAll('li');
    class_all.addEventListener('touchstart', function (e) {
        satrtX = e.targetTouches[0].pageX;
    })
    class_all.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - satrtX;
        if (moveX < 0) {
            num = 1;
        } else {
            num = 0;
        }
        class_all.style.transition = 'all .6s';
        // class_all.style.left = -num * offset + 'px';
        class_all.style.transform = 'translate( ' + -num * offset + 'px)'
        for (i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = '#cccccc';
            lis[num].style.backgroundColor = 'red';
        }
    })
    // for (i = 0; i < class_box.length; i++) {
    //     class_box[i].setAttribute('index', i)
    // }
    // var index = class_all.getAttribute('index');

    this.window.addEventListener('scroll', function () {
        let top = this.window.pageYOffset;
        let back_top = this.document.querySelector('.back-top ');
        let footerBackTop = this.document.querySelector('.footer-back-top');
        // console.log(top)
        if (top >= 700) {
            back_top.style.display = 'block'
        } else {
            back_top.style.display = 'none'
        }
        back_top.addEventListener('click', function () {
            window.scroll(0, 0);
        })
        footerBackTop.addEventListener('click', function () {
            window.scroll(0, 0);
        })
    })
})